<template>
  <div id="devicePage" class="wrapper">
    <div class="ur-form mb-3 d-flex align-items-center">
      责任区：
      <el-select class="w150 mr-2" v-model="regionId" slot="prepend" placeholder="请选择" size="small" @change="currentPage=1;search()">
        <el-option label="全部" :value="-1"></el-option>
        <el-option v-for="(item,index) in regions" :key="index" :label="item.Name" :value="item.Id"></el-option>
      </el-select>
      <el-input placeholder="请输入内容"  class="input-with-select w250 "  size="small" v-model="searchTxt" @blur="currentPage=1;search()">
        <el-button slot="append"  class="ur-btn ur-btn-primary" @click="currentPage=1,search()"> <i class="iconfont icon-search"></i>查询</el-button>
      </el-input>
      <el-button class="ur-btn ur-btn-primary ml-2" @click="showPoleAdd=true,pole.Id=0"><i class="iconfont icon-add"></i>添加</el-button>
      <el-button class="ur-btn ur-btn-primary ml-2" @click="batchAddPole"><i class="iconfont icon-add"></i>批量新增</el-button>
      <el-button slot="append" class="ur-btn ur-btn-primary ml-2" @click="exportData"><i class="iconfont icon-dowload font16"></i>导出</el-button>
    </div>
    <!--表格-->
    <el-table class="ur-table" stripe ref="tableDom3" :data="tables.datas" style="width: 100%" :height="clientHeight-210" :cell-class-name="common.fixedCell"
              highlight-current-row @selection-change="selsChange" @row-click="rowClick">
      <el-table-column type="selection" width="50" align="center" fixed></el-table-column>
      <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="50" fixed></el-table-column>
      <el-table-column v-for="(v,index) in tables.columns" :prop="v.field" :fixed="v.field=='No'" :label="v.title" :min-width="v.width" align="center" :key="index">
        <template slot-scope="scope" >
          <span v-if="v.field=='RunDate'">{{api.formatDate(scope.row[v.field])}}</span>
          <span v-else-if="v.field=='ChannelMode'&&scope.row.ChannelMode" v-for="(item,index) in global.TnChannelModes">
            <template  v-if="item.id==scope.row.ChannelMode">{{item.name+(scope.row.ChannelMode==2?scope.row.SimOprators:'')}}</template>
          </span>
          <span v-else-if="v.field=='ChannelMode'&&!scope.row.ChannelMode">/</span>
          <i v-else-if="v.field=='localtion'" class="font18 iconfont icon-quyu txt_gray" @click="showMap=true;tables.sel=scope.row"></i>
          <span  v-else>{{scope.row[v.field]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" fixed="right">
        <template slot="header" slot-scope="scope">操作</template>
        <template slot-scope="scope">
          <el-button class="ur-btn ur-btn-waring d-inline-block">
            <i class="font18 iconfont icon-edit mr-0" @click="handleEdit(scope.$index, scope.row,true)"></i>
          </el-button>
          <el-button class="ur-btn ur-btn-danger d-inline-block">
            <i class="font18 iconfont icon-delete mr-0" @click="handleDel(scope.$index, scope.row)"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt-3">
      <el-button v-if="limits.indexOf('2_03_02_05')!=-1" class="float-left" type="danger" @click="batchRemove"  :disabled="sels.length===0">批量删除</el-button>
      <el-pagination class="float-right " @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[100,200,500,1000]" :current-page="currentPage" :page-size="pageSize" :total="total"></el-pagination>
    </div>

    <!--地图-->
    <el-dialog v-el-drag-dialog title="获取位置" :visible.sync="showMap" width="900px" @close="search">
      <template v-if="showMap">
        <u-map :iconType="1" :boxs="tables.datas" :box="tables.sel"  @getLngLat="getLngLat($event)"></u-map>
      </template>
    </el-dialog>
    <el-dialog class="ur-form-dialog" v-el-drag-dialog title="灯杆" :visible.sync="showPoleAdd" width="950px" @close="search" :append-to-body="true">
      <template v-if="showPoleAdd">
        <pole-add :poleId="pole.Id" @close="showPoleAdd=false"></pole-add>
      </template>
    </el-dialog>

    <!--批量新增灯杆-->
    <el-dialog class="ur-form-dialog" v-el-drag-dialog title="批量新增" :visible.sync="batchPoleDialog" width="450px" top="15%">
    <div class="p-3" v-if="batchPoleDialog">
      <el-form class="ur-form " :inline="true" ref="uploadForm" style="background: transparent;">
        <el-form-item label="选择附件" label-width="120px" label-position="right" class="w300 mb-2" >
          <div class="p_relative ur-file w160">
            <input class=" file" type="file" style="line-height: 20px;" accept=".xlsx" @change="changeFiles">
          </div>
        </el-form-item>
      </el-form>
      <p class="mb-3" style="line-height: 20px;color: #44FF95;">注：文件要求类型 （注：只支持xlsx格式文件 导入前请先下载模板按照页面上显示信息填写以及请先阅读参数输入规则说明！）</p>
      <div class="d-flex align-items-center justify-content-center">
        <el-button class="ur-btn ur-btn-primary" @click="downloadFile"><i class="iconfont icon-dowload"></i>下载模板</el-button>
        <el-button class="ur-btn ur-btn-primary" @click="saveBatchPole"><i class="iconfont icon-sure"></i>确定</el-button>
      </div>
    </div>
  </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import api from 'api/api'
  import fetch from 'api/fetch'
  import uMap from 'base/map/map'
  import elDragDialog from 'directive/el-dragDialog'

  import poleAdd from './pole-add'

  export default {
    directives:{elDragDialog},
    components: {
      uMap,
      poleAdd
    },
    props: {},
    data() {
      return {
        regionId:-1,
        regions:[],
        total: 0,
        currentPage: 1,
        pageSize:100,
        searchTxt:null,
        tables: {
          sel: null,//选中行
          columns: [
            {field: "No", title: "灯杆编号", width: '120'},
            {field: "AreaName", title: "责任区", width: null},
            {field: "BoxNo", title: "控制箱编号", width: '90'},
            {field: "InstallPosition", title: "安装地址", width: '150'},
            {field: "RoadSection", title: "所属路段", width: null},
            {field: "Material", title: "灯杆材质", width: '80'},
            {field: "PoleType", title: "灯杆类型", width: '80'},
            {field: "LightType", title: "照明类型", width: '80'},
            {field: "LightSourceType", title: "光源类型", width: '80'},
            {field: "Lamps", title: "灯盏数", width: '60'},
            {field: "RunDate", title: "安装日期", width: '110'},
            {field: "Lamps", title: "额定功率", width: '60'},
            {field: "Lamps", title: "型号", width: '60'},
            // {field: "localtion", title: "定位", width: null},

          ],
          datas: []
        },
        sels:[],
        pole:{},
        api:api,
        showMap:false,
        showPoleAdd:false,
        batchPoleDialog:false,
        formData:new FormData(),
        channelType:''
      }
    },
    watch: {},
    computed: {
      getGidData(){
        if(this.tables.datas.length){
          return this.tables.datas.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
        }
      },
      ...mapState({
        clientHeight: state => state.comm.clientHeight,
        clientWidth: state => state.comm.clientWidth,
        limits:state=>state.user.userInfo.limits
      }),
    },
    methods: {
      exportData(){
        api.fetchFile('/Pole/ExportPoleInfo', {regionId:this.regionId,value:this.searchTxt,channelType:this.channelType})
          .then(r => {
            fetch.saveFile(r,'灯杆列表',['',''])
          })
      },
      batchAddPole(){
        this.batchPoleDialog=true
      },
      changeFiles(){
        if (this.formData.has("file")) {
          this.formData.delete("file")
        }
        let files=event.target.files
        for(let i=0;i<files.length;i++){
          this.formData.append('file',files[i])
        }
      },
      saveBatchPole(){
        // this.$refs.uploadForm.reset()
        if(this.formData.get('file')){
          api.httpFormData('/Pole/BatchInsert',this.formData)
            .then(r=>{
              this.$message.success({showClose:true,message:'批量导入成功'})
              this.search()
              this.batchPoleDialog=false
            })
        }else{
          this.$message.warning({showClose:true,message:'未选择文件'})
        }
      },
      downloadFile(){
        // api.fetchFile('/上海路灯控制器导入模板.xlsx', {})
        //   .then(r => {
        //     fetch.saveFile(r,'上海路灯批量模板','')
        //   })
        window.open(api.ajaxServe+'批量导入灯杆模板.xlsx')
      },
      getLngLat(v){
        this.showMap=false
      },
      indexMethod(index) {
        return index + 1
      },
      rowClick(row, event, column){
      },
      selsChange(sels) {
        this.sels = sels
        this.sels.splice(1,0)
      },
      handleSizeChange(val) {
        this.pageSize=val
        this.currentPage=1
        this.search()
      },
      handleCurrentChange(val) {
        this.currentPage=val
        this.search()
      },
      handleEdit(index, row, isEdit) {
        this.pole=row
        this.showPoleAdd=true
      },
      handleDel(index, row) {
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
          .then(() => {
            api.fetch('/Pole/Delete',[row.Id])
              .then(r=>{
                this.$message.success('删除成功')
                this.search()
              })
          })
      },
      batchRemove() {
        let ids=[]
        this.sels.map(r=>{
          ids.push(r.Id)
        })
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
          .then(() => {
            api.fetch('/Pole/Delete',ids)
              .then(r=>{
                this.$message.success('删除成功')
                this.search()
              })
          })
      },
      search(){
        for(let i=0;i<10;i++){
          let o={AreaId: 1, AreaName: "川沙", BaseForm: 1, BaseSpec: 1, BoxId: 1, BoxNo: "20446",
            ChannelMode: null, ControlInstalled: 0, Created: "2017-12-11 17:12:19", Deleted: 0,
            DevAddr: null, ErectionMode: 1, Height: 10.5, Id: 1, InstallPosition: "申江路", Lamps: 1,
            Lat: 31.2001983544, LightSourceType: 4, LightType: 4, Lng: 121.62536174, Manufacturer: "燎扬", Material: 1,
            No: "20446101", OverheadName: "", PoleShape: 2, PoleType: 3, RoadEnd: "申江路", RoadSection: "申江路",
            RoadStart: "申江路", RtuId: 1, RtuXh: 0, RunDate: "2009-09-09 00:00:00", SimOprators: null,
            State1: 0, State2: 0, State3: 0, SwitchNo: 1, SwitchXh: 1, TunnelName: "",
            Updated: "2020-06-27 21:03:13", WellInstalled: 0, WellLayout: 1}
          this.tables.datas.push(o)
        }
      /*  api.fetchSimple('/Pole/QueryPoleInfo',{regionId:this.regionId,value:this.searchTxt,channelType:this.channelType,pageNo:this.currentPage,pageSize:this.pageSize})
          .then(r=>{
            this.total=r.total
            this.tables.datas=r.data
          })*/
      },
      queryRegion(){
      },
    },
    created() {
      this.queryRegion()
      this.search()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
